import { Button, Card, Col, Flex, Form, Input, Radio, Row, Tag } from "antd";
import { useSelector } from "react-redux";
import { RootState } from "../../store";
import { useState } from "react";

const genders = [
  { value: 0, label: "男" },
  { value: 1, label: "女" },
];

export default function Account() {
  const crtUser = useSelector((state: RootState) =>
    state.users.users.find((u) => u.id === state.users.crtUser.id),
  );
  const crtRole = useSelector((state: RootState) => state.users.roles);

  const [user, setUser] = useState({ ...crtUser });

  const UserRoleTag = () => {
    if (crtUser) {
      const r = crtRole.find((r) => r.value === crtUser.role);
      if (r) return <Tag color={r.color}>{r.label}</Tag>;
    }
    return <Tag color="error">职位被删除</Tag>;
  };

  return (
    <>
      <Flex gap="small" style={{ padding: "10px" }} vertical>
        <Card title="我的信息">
          <Form variant="filled">
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="名称">
                  <Input
                    value={user.nike}
                    onChange={(e) => setUser({ ...user, nike: e.target.value })}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="职位">
                  <UserRoleTag />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="用户名">
                  <span style={{ color: "#8c8c8c" }}>{user.id}</span>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="电话号码">
                  <Input
                    value={user.phoneNumber}
                    onChange={(e) =>
                      setUser({ ...user, phoneNumber: e.target.value })
                    }
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="性别">
                  <Radio.Group
                    value={user.gender}
                    optionType="button"
                    buttonStyle="solid"
                    options={genders}
                  ></Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item>
                  <Button type="primary">保存</Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
      </Flex>
    </>
  );
}
